<template>
  <div>
    <el-dialog
        title="打标签"
        :visible="true"
        width="560px"
        :show-close="false"
        :close-on-click-modal="false"
        @close="handleClose">
      <div style="display: flex;align-items: center">
        <div class="label" style="margin-left: 32px;">打标签:</div>
        <el-select v-model="selectTags" multiple filterable class="inputStyle" style="height: 100%;">
          <el-option v-for="item in tagOptions" :value="item" :label="item"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer" >
        <button type="primary" @click="setTag" class="button" >确定</button>
        <button @click="handleClose"class="cancel" >取消</button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
import {getTagList, setTag} from "@/api/comman";

export default {
  props: ['id', 'kind', 'tags'],
  data() {
    return {
      targetId: this.id,
      // 人力库  cameramen | 用户库custom | 渠道库channel ｜ null 全部
      targetKind: this.kind,
      tagOptions: [],
      selectTags: this.tags
    }
  },
  mounted() {
    setTimeout(() => {
      this.getAllTag()
    }, 100)
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    getAllTag() {
      getTagList({kind: null}).then(res => {
        if (res) {
          this.tagOptions = res
        }
      })
    },
    setTag() {
      // if (this.selectTags.length === 0) return this.$message.error('请选择标签')
      const requestParam = {
        id: this.targetId,
        kind: this.targetKind,
        tags: this.selectTags
      }
      setTag(requestParam).then(res => {
        if (res) {
          this.$message.success('操作成功')
          this.handleClose()
        }
      })
    }
  }

}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__header {
  padding-top: 32px; 
}
::v-deep .el-dialog__wrapper .el-dialog {
  border-radius: 8px; 
}
::v-deep .el-dialog__title {
  color: #333333;
  font-size: 16px;
  font-weight: bold; 
  font-family: PingFang SC, PingFang SC;
  margin-left: 32px;
}
.dialog-footer{
  margin-right: 32px;
}
.button{
  width: 60px;
  height: 30px;
  background-color: #4169E1;
  border-radius: 4px;
  color: #FFFFFF;
  border: none;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}
.cancel{
  width: 60px;
  height: 30px;
  border: none;
  background-color: #EEEEEE;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  border-radius: 4px;
  margin-left: 8px;
  cursor: pointer;
}
.inputStyle {
  width: 390px;
  height: 40px;
}
.label {
  font-size: 14px;
  color: #666666;
  margin-right: 9px;
}
::v-deep .el-dialog--center .el-dialog__footer {
  text-align: right;
}
@media (max-width: 768px) {
  ::v-deep .el-dialog {
    width: 100vw !important;
  }
}
</style>
